<template>
    <el-dialog
        v-model="roleAddOrUpdateDialogVisible"
        :title="title"
        width="30%"
        align-center
        :show-close="false"
        :close-on-click-modal="false"
    >
        <div class="formContainer">
            <el-form :model="roleDataForm" :rules="roleRules" ref="roleDataFormRef">
                <el-form-item label="角色编码" label-width="20%" prop="roleCode">
                    <el-input v-model="roleDataForm.roleCode" placeholder="角色编码" clearable />
                </el-form-item>
                <el-form-item label="角色名称" label-width="20%" prop="roleName">
                    <el-input v-model="roleDataForm.roleName" placeholder="角色名称" clearable />
                </el-form-item>
                <el-form-item label="角色描述" label-width="20%" prop="roleDescription">
                    <el-input v-model="roleDataForm.roleDescription" placeholder="角色描述" clearable />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancelDialog()">取 消</el-button>
                <el-button type="primary" :loading="saveLoading" @click="submitDialog(roleDataFormRef)">
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script name="RoleAddOrUpdateDialog" setup lang="ts">
import {roleInfoCreate, roleInfoQuery, roleInfoUpdate} from "@/request/role";
import {ElNotification, FormInstance} from "element-plus";
import {computed, defineProps, ref} from "vue";
import {useRoleInfoStore} from "@/stores/userInfo/roleInfo";

let props = defineProps(['roleDataForm', 'title']);

let roleDataForm = computed(() => {return props['roleDataForm']});
let title = computed(() => {return props['title']});

let roleRules = ref({
    roleName: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }]
});
let saveLoading = ref(false);

let roleAddOrUpdateDialogVisible = computed(() => {return useRoleInfoStore().addOrUpdateDialog});
let roleSearchData = computed(() => {return useRoleInfoStore().roleSearchData});

function cancelDialog() {
    useRoleInfoStore().resetAddOrUpdateDialog(false);
}

let roleDataFormRef = ref<FormInstance>()
function submitDialog(formEl: FormInstance | undefined) {
    if (!formEl) return
    saveLoading.value = true
    formEl.validate((valid) => {
        if (valid) {
            if (roleDataForm.value.id === '') {
                // 添加数据
                roleInfoCreate(roleDataForm.value).then(res => {
                    if (res["code"] === '200') {
                        ElNotification({
                            title: 'Success',
                            message: res["message"],
                            type: 'success'
                        });
                        roleInfoQuery(roleSearchData.value).then(res => {
                            useRoleInfoStore().resetRoleDataList(res.data);
                        })
                        useRoleInfoStore().resetAddOrUpdateDialog(false);
                    }
                    saveLoading.value = false
                }).catch(res => {
                    saveLoading.value = false
                })
            } else {
                // 修改数据
                roleInfoUpdate(roleDataForm.value).then(res => {
                    if (res["code"] === '200') {
                        ElNotification({
                            title: 'Success',
                            message: res["message"],
                            type: 'success'
                        });
                        roleInfoQuery(roleSearchData.value).then(res => {
                            useRoleInfoStore().resetRoleDataList(res.data);
                        })
                        useRoleInfoStore().resetAddOrUpdateDialog(false);
                    }
                    saveLoading.value = false
                }).catch(res => {
                    saveLoading.value = false
                })
            }
        }
    })
}
</script>

<style scoped>

</style>